<template>
	<view class="container">

		<!-- Custom Navigation Bar -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-inner">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="nav-title">个人信息编辑</text>
				<view class="nav-right">
					<view class="nav-btn" @click="onRightPrimary">
						<text class="icon-circle">◦</text>
					</view>
					<view class="nav-btn" @click="onRightMore">
						<text class="icon-more">⋯</text>
					</view>
				</view>
			</view>
		</view>
		<!-- placeholder to offset content -->
		<view class="nav-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>

		<view class="avatar-section">
			<view class="avatar" @click="handleToAvatar">
				<image
					:src="userInfo.avatar|| '/static/images/profile.png'"
					mode="aspectFill"></image>
			</view>
			<image class="edit-icon"
				src="https://www.ruilongan.com/profile/upload/2025/07/10/Group_174@2x_20250710091805A084.png"
				mode="aspectFit"></image>
		</view>

		<view class="content-wrapper">
			<view class="info-section">
				<text class="section-title">个人信息</text>
				<view class="info-item margin-top">
					<text class="label">姓名：</text>
					<input type="text" v-model="userInfo.userName" placeholder="请输入姓名" />
				</view>

				<view class="info-item">
					<text class="label">性别：</text>
					<view class="gender-selector">
						<view :class="['gender-option', userInfo.sex === '1' ? 'active' : '']"
							@click="selectGender('1')">男</view>
						<view :class="['gender-option', userInfo.sex === '0' ? 'active' : '']"
							@click="selectGender('0')">女</view>
					</view>
				</view>

				<view class="info-item">
					<text class="label">手机号：</text>
					<input type="number" v-model="userInfo.phone" placeholder="请输入手机号" :disabled="true"/>
				</view>

				<view class="info-item">
					<text class="label required">出生日期：</text>
					<picker mode="date" :disabled="userInfo.isBirUpdate==='1'" :value="userInfo.birthday" @change="onBirthDateChange">
						<view class="picker-value">
							<text v-if="userInfo.birthday" class="picker-text">{{userInfo.birthday}}</text>
							<text v-else style="color: #999;">请选择出生日期</text>
							<text class="arrow">›</text>
						</view>
					</picker>
				</view>

				<view class="hint-text">关于生日礼品的领取，仅可以修改一次，请谨慎操作！</view>

				<view class="info-item">
					<text class="label required">身高：</text>
					<view class="input-with-unit">
						<input type="text" v-model="userInfo.height" placeholder="请输入身高" />
						<text class="unit">cm</text>
					</view>
				</view>

				<view class="info-item">
					<text class="label required">体重：</text>
					<input type="text" v-model="userInfo.weight" placeholder="请输入体重" />
					<text class="unit">kg</text>
				</view>

				<view class="info-item">
					<text class="label required">所属地区：</text>
					<picker mode="region" :value="userInfo.regionArr" @change="onRegionChange">
						<view class="picker-value">
							<text v-if="userInfo.regionArr && userInfo.regionArr.length > 0">{{userInfo.regionArr.join('')}}</text>
							<text v-else style="color: #999;">请选择所属地区</text>
							<text class="arrow">›</text>
						</view>
					</picker>
				</view>

				<view class="info-item">
					<text class="label required">详情地址：</text>
					<input type="text" v-model="userInfo.addressDetail" placeholder="请输入详情地址" />
				</view>
			</view>

			<view class="medical-section">
				<text class="section-title">病史档案</text>

				<view class="info-item">
					<text class="label">糖尿病类型：</text>
					<view class="type-selector">
						<view :class="['type-option', userInfo.diabetesType === 'I型' ? 'active' : '']"
							@click="selectType('I型')">I型</view>
						<view :class="['type-option', userInfo.diabetesType === 'II型' ? 'active' : '']"
							@click="selectType('II型')">II型</view>
					</view>
				</view>

				<view class="info-item">
					<text class="label">确诊日期：</text>
					<picker mode="date" :value="userInfo.diagnosisDate" @change="onDiagnosisDateChange">
						<view class="picker-value">
							<text v-if="userInfo.diagnosisDate">{{userInfo.diagnosisDate}}</text>
							<text class="arrow">›</text>
						</view>
					</picker>
				</view>

				<view class="info-item">
					<text class="label">既往病史：</text>
					<view class="history-value" @click="showMedicalHistoryPicker">
						{{userInfo.medicalHistory.join('、') || '请选择既往病史'}}
						<text class="arrow">›</text>
					</view>
				</view>
			</view>

			<view class="contact-section">
				<text class="section-title">紧急联系人</text>

				<view class="info-item">
					<text class="label">姓名</text>
					<input type="text" v-model="userInfo.emergencyContactName" placeholder="请输入姓名" />
				</view>

				<view class="info-item">
					<text class="label">联系方式：</text>
					<input type="text" v-model="userInfo.emergencyContactPhone" placeholder="请输入联系方式" />
				</view>

				<view class="info-item">
					<text class="label">称呼：</text>
					<view class="relation-value" @click="openRelationPicker">
						{{userInfo.emergencyContactCall || '请选择联系人称呼'}}
						<text class="arrow">›</text>
					</view>
				</view>
			</view>

			<view class="slogan">
				<text class="slogan-icon">⭐</text>
				<text class="slogan-text">"让我们更懂您，让服务更贴心，您的信息越完整，我们的服务越温暖"</text>
			</view>

			<button class="save-btn" @click="saveInfo">保存</button>
		</view>

		<!-- Add the custom popup -->
		<view class="medical-history-popup" v-if="showMedicalPicker">
			<view class="popup-mask" @click="showMedicalPicker = false"></view>
			<view class="popup-content bottom-slide">
				<view class="popup-header">
					<text class="popup-title">选择既往病史</text>
					<text class="popup-close" @click="showMedicalPicker = false">×</text>
				</view>
				<view class="popup-body">
					<view class="medical-option" v-for="(option, index) in medicalHistoryOptions" :key="index"
						@click="toggleMedicalOption(index)">
						<view :class="['checkbox', option.checked ? 'checked' : '']">
							<text v-if="option.checked" class="checkbox-inner">✓</text>
						</view>
						<text class="option-label">{{option.value}}</text>
					</view>
				</view>
				<view class="popup-footer">
					<button class="confirm-btn" @click="confirmMedicalHistory">确认</button>
				</view>
			</view>
		</view>

		<!-- 称呼选择弹出框 -->
		<view class="relation-popup" v-if="showRelationPicker">
			<view class="popup-mask" @click="showRelationPicker = false"></view>
			<view class="relation-popup-content">
				<view class="relation-popup-header">
					<text class="relation-popup-title">请选择称呼</text>
					<text class="popup-close" @click="showRelationPicker = false">×</text>
				</view>
				<view class="relation-options">
					<view class="relation-option-item" v-for="(option, index) in relationOptions" :key="index"
						@click="selectRelation(option)">
						<text class="option-text">{{option}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 图片选择组件 -->
		<PhotoSelector ref="photoSelector" @imageSelected="onImageSelected" />
		
		<!-- 图片预览组件 -->
		<ImagePreview 
			:visible="showImagePreview" 
			:imageSrc="selectedImageSrc" 
			@cancel="onPreviewCancel"
			@confirm="onPreviewConfirm"
		/>
	</view>
</template>

<script>
	import {
		getInfo,
		updateInfo
	} from '@/api/vipUser.js'
	import { uploadAppAvatar } from "@/api/system/user"

	import PhotoSelector from '@/components/PhotoSelector.vue'
	import ImagePreview from '@/components/ImagePreview.vue'
	
	export default {
		components: {
			PhotoSelector,
			ImagePreview
		},
		data() {
			return {
				statusBarHeight: 20,
				userId: "",
				userInfo: {
					userName: '',
					sex: '1',
					phone: '',
					birthday: '',
					height: '',
					weight: '',
					regionArr: [],
					province: '',
					city: '',
					county: '',
					region: '',
					addressDetail: '',
					diabetesType: '',
					diagnosisDate: '',
					medicalHistory: [],
					emergencyContactName: '',
					emergencyContactPhone: '',
					emergencyContactCall: '',
					avatar: ''
				},
				emergencyContact: {
					name: '',
					phone: '',
					relation: ''
				},
				medicalHistoryOptions: [{
						value: '糖尿病',
						checked: false
					},
					{
						value: '高血压',
						checked: false
					},
					{
						value: '心脏病',
						checked: false
					},
					{
						value: '青光眼',
						checked: false
					},
					{
						value: '肾病',
						checked: false
					},
					{
						value: '其他',
						checked: false
					}
				],
				showMedicalPicker: false,
				relationOptions: [
					'父亲',
					'母亲',
					'配偶',
					'子女',
					'兄弟',
					'姐妹',
					'朋友',
					'同事',
					'其他'
				],
				showRelationPicker: false,
				// 新增图片选择相关
				showImagePreview: false,
				selectedImageSrc: '',
				isUploading: false
			}
		},
		onLoad(option) {
			this.userId = option.userId
			try {
				const sys = uni.getSystemInfoSync()
				this.statusBarHeight = sys.statusBarHeight || 20
			} catch (e) {
				this.statusBarHeight = 20
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			onRightPrimary() {},
			onRightMore() {},
			selectGender(gender) {
				this.userInfo.sex = gender
			},
			selectType(type) {
				this.userInfo.diabetesType = type
			},
			onBirthDateChange(e) {
				this.userInfo.birthday = e.detail.value
			},
			onDiagnosisDateChange(e) {
				this.userInfo.diagnosisDate = e.detail.value
			},
			onRegionChange(e) {
				this.userInfo.regionArr = e.detail.value
				this.userInfo.province = e.detail.value[0]
				this.userInfo.city = e.detail.value[1]
				this.userInfo.county = e.detail.value[2]
				console.log(this.userInfo)
			},
			saveInfo() {
				// 必填项验证
				if (!this.userInfo.birthday) {
					uni.showToast({
						title: '请选择出生日期',
						icon: 'none'
					})
					return
				}
				
				if (!this.userInfo.height) {
					uni.showToast({
						title: '请输入身高',
						icon: 'none'
					})
					return
				}
				
				if (!this.userInfo.weight) {
					uni.showToast({
						title: '请输入体重',
						icon: 'none'
					})
					return
				}
				
				if (!this.userInfo.regionArr || this.userInfo.regionArr.length === 0) {
					uni.showToast({
						title: '请选择所属地区',
						icon: 'none'
					})
					return
				}
				
				if (!this.userInfo.addressDetail) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					})
					return
				}

				if (this.userInfo.regionArr) {
					this.userInfo.province = this.userInfo.regionArr[0]
					this.userInfo.city = this.userInfo.regionArr[1]
					this.userInfo.county = this.userInfo.regionArr[2]
					this.userInfo.region = this.userInfo.regionArr.join('')
				}


				if (this.userInfo.medicalHistory) {
					this.userInfo.pastHistory = this.userInfo.medicalHistory.join('、')
				}
				
				this.userInfo.isBirUpdate='1'

				updateInfo(this.userInfo).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						this.getInfo()
					} else {
						uni.showToast({
							title: res.msg || '保存失败，请重试',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error('保存失败:', err)
					uni.showToast({
						title: '保存失败，请检查网络连接',
						icon: 'none'
					})
				})
			},
			
			showMedicalHistoryPicker() {
				// 根据已选择的病史更新选项的checked状态
				this.medicalHistoryOptions.forEach(option => {
					if (this.userInfo.medicalHistory) {
						option.checked = this.userInfo.medicalHistory.includes(option.value)
					}
				})
				this.showMedicalPicker = true
			},
			toggleMedicalOption(index) {
				this.medicalHistoryOptions[index].checked = !this.medicalHistoryOptions[index].checked
			},
			confirmMedicalHistory() {
				this.userInfo.medicalHistory = this.medicalHistoryOptions
					.filter(option => option.checked)
					.map(option => option.value)
				this.showMedicalPicker = false
			},

			openRelationPicker() {
				this.showRelationPicker = true
			},
			
			selectRelation(relation) {
				this.userInfo.emergencyContactCall = relation
				this.showRelationPicker = false
			},

			getInfo() {
				getInfo(this.userId).then(res => {
					if (res.code === 200) {
						this.userInfo = res.data
						
						// 处理地区数据
						let regionArr = []
						if (this.userInfo.province) {
							regionArr.push(this.userInfo.province)
							if (this.userInfo.city) {
								regionArr.push(this.userInfo.city)
								if (this.userInfo.county) {
									regionArr.push(this.userInfo.county)
								}
							}
						}
						this.userInfo.regionArr = regionArr
						
						// 处理地址详情
						if (this.userInfo.address && !this.userInfo.addressDetail) {
							this.userInfo.addressDetail = this.userInfo.address
						}
						
						// 处理出生日期
						if (this.userInfo.birthDate && !this.userInfo.birthday) {
							this.userInfo.birthday = this.userInfo.birthDate
						}
						
						// 处理既往病史
						let medicalHistory = []
						if (this.userInfo.pastHistory) {
							medicalHistory = this.userInfo.pastHistory.split("、")
						}
						this.userInfo.medicalHistory = medicalHistory
					} else {
						uni.showToast({
							title: res.msg || '获取用户信息失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					console.error('获取用户信息失败:', err)
					uni.showToast({
						title: '获取用户信息失败，请检查网络连接',
						icon: 'none'
					})
				})
			},

			handleToAvatar() {
				// 直接弹出图片选择弹框
				this.$refs.photoSelector.open()
			},
			
			// 图片选择完成
			onImageSelected(imageSrc) {
				this.selectedImageSrc = imageSrc
				this.showImagePreview = true
			},
			
			// 预览取消
			onPreviewCancel() {
				this.showImagePreview = false
				this.selectedImageSrc = ''
			},
			
			// 预览确认，开始上传
			onPreviewConfirm(imageSrc) {
				this.showImagePreview = false
				this.uploadAvatar(imageSrc)
			},
			
			// 上传头像
			uploadAvatar(imageSrc) {
				if (this.isUploading) {
					return
				}
				
				this.isUploading = true
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				
				// const uploadData = {
				// 	name: 'avatarfile',
				// 	filePath: imageSrc
				// }
				let data = {name: 'avatarfile', filePath: imageSrc}
							// uploadAppAvatar(data).then(response => {
							// 	store.commit('SET_AVATAR', baseUrl + response.imgUrl)
							// 	uni.showToast({ title: "修改成功", icon: 'success' })
							// 	uni.navigateBack()
							// })

				uploadAppAvatar(data).then(response => {
					uni.hideLoading()
					this.isUploading = false
					
					if (response.code === 200) {
						// 更新头像显示
						this.userInfo.avatar = response.imgUrl
						
						// 更新store中的头像（如果需要）
						// this.$store.commit('SET_AVATAR', response.imgUrl)
						
						uni.showToast({
							title: '头像上传成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: response.msg || '上传失败',
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('头像上传失败:', error)
					uni.hideLoading()
					this.isUploading = false
					uni.showToast({
						title: '上传失败，请重试',
						icon: 'none'
					})
				})
			},

		}
	}
</script>

<style>
	.container {
		min-height: 200px;
		background-image: url('https://www.ruilongan.com/profile/upload/2025/08/27/个人信息背景图@2x_20250827153128A004.png');
		background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;
	}

	.avatar-section {
		padding: 0 30rpx;
		display: flex;
		justify-content: center;
		position: relative;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
		margin-bottom: -100rpx;
		z-index: 1;
	}

	.content-wrapper {
		background: #fff;
		border-radius: 80rpx 80rpx 0 0;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-top: 120rpx;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		z-index: 0;
	}

	.info-section,
	.medical-section,
	.contact-section {
		background: transparent;
		padding: 0;
		margin-bottom: 30rpx;
		backdrop-filter: none;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 550;
		color: #333;
		margin-bottom: 30rpx;
		padding: 0;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 26rpx 32rpx;
		background: #FBFBFD;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.label {
		width: 180rpx;
		color: #333;
		font-size: 28rpx;
	}

	.required::before {
		content: '*';
		color: #ff0000;
		margin-right: 4rpx;
	}

	input {
		flex: 1;
		font-size: 28rpx;
		text-align: right;
		border: none;
		outline: none;
		background: transparent;
	}

	input:focus {
		color: #333;
	}

	input::placeholder {
		color: #999;
	}

	picker {
		flex: 1;
	}

	.picker-value {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28rpx;
		min-height: 40rpx;
	}

	.picker-text {
		color: #333;
	}

	.arrow {
		color: #999;
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	.hint-text {
		font-size: 24rpx;
		color: #999;
		padding: 20rpx 0;
	}

	.history-value,
	.relation-value {
		flex: 1;
		font-size: 28rpx;
		color: #666;
		text-align: right;
	}

	.slogan {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		gap: 10rpx;
	}

	.slogan-icon {
		color: #ffd700;
	}

	.slogan-text {
		font-size: 24rpx;
		color: #999;
	}

	.save-btn {
		width: 100%;
		height: 88rpx;
		background: #4CD080;
		color: white;
		border-radius: 44rpx;
		font-size: 32rpx;
		margin: 40rpx 0 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		transition: all 0.3s ease;
	}

	.save-btn:active {
		background: #3bb870;
		transform: scale(0.98);
	}

	.save-btn:disabled {
		background: #ccc;
		color: #999;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 6rpx solid #fff;
		box-sizing: border-box;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	.avatar:active {
		transform: scale(0.95);
		opacity: 0.8;
	}
	
	.avatar-tip {
		position: absolute;
		bottom: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		background: rgba(0, 0, 0, 0.3);
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		white-space: nowrap;
	}

	.avatar image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.edit-icon {
		position: absolute;
		right: calc(50% - 80rpx);
		bottom: 20rpx;
		background: #ff8f00;
		color: white;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.gender-selector,
	.type-selector {
		display: flex;
		flex: 1;
		justify-content: flex-end;
	}

	.gender-option,
	.type-option {
		width: 80rpx;
		height: 60rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		background: #EBEBE9;
	}

	.gender-option:first-child,
	.type-option:first-child {
		border-radius: 30rpx 0 0 30rpx;
		border-right: 1rpx solid #eee;
	}

	.gender-option:last-child,
	.type-option:last-child {
		border-radius: 0 30rpx 30rpx 0;
	}

	.gender-option.active,
	.type-option.active {
		background: #07C160;
		color: white;
	}

	.input-with-unit {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 4rpx;
	}

	.input-with-unit input {
		text-align: right;
		flex: 1;
		margin-right: 4rpx;
	}

	.unit {
		color: #999;
		font-size: 24rpx;
		margin-left: 12rpx;
		font-weight: normal;
	}

	/* 弹出框样式 */
	.medical-history-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		animation: fadeIn 0.3s ease;
		/* 确保在移动端正确显示 */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		will-change: opacity;
	}

	.popup-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		animation: slideUp 0.3s ease;
		padding-bottom: env(safe-area-inset-bottom);
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.popup-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.popup-close {
		font-size: 40rpx;
		color: #999;
		padding: 10rpx;
	}

	.popup-body {
		padding: 30rpx;
		max-height: 70vh;
		overflow-y: auto;
	}

	.medical-option {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 8rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checkbox.checked {
		background: #4CD080;
		border-color: transparent;
	}

	.checkbox-inner {
		color: #fff;
		font-size: 28rpx;
	}

	.option-label {
		font-size: 28rpx;
		color: #333;
	}

	.popup-footer {
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
	}

	.confirm-btn {
		width: 100%;
		height: 80rpx;
		background: #4CD080;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	.confirm-btn:active {
		opacity: 0.9;
	}

	/* 称呼选择弹出框样式 */
	.relation-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.relation-popup-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		animation: slideUp 0.3s ease;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.relation-popup-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.relation-popup-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.relation-options {
		padding: 0;
	}

	.relation-option-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: #fff;
		transition: background-color 0.2s ease;
	}

	.relation-option-item:last-child {
		border-bottom: none;
	}

	.relation-option-item:active {
		background-color: #f8f8f8;
	}

	.option-text {
		font-size: 30rpx;
		color: #333;
		text-align: center;
	}

	/* Custom navigation bar */
	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		/* background: linear-gradient(92deg, #00F5A0, #00D9F5); */
	}
	.nav-inner {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px;
	}
	.nav-left, .nav-right {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.back-icon {
		font-size: 28px;
		color: #111;
	}
	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 16px;
		font-weight: 600;
		color: #111;
	}
	.nav-btn {
		width: 28px;
		height: 28px;
		border-radius: 14px;
		background: rgba(255,255,255,0.6);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.icon-circle, .icon-more {
		color: #111;
		font-size: 18px;
		line-height: 1;
	}
	.nav-placeholder {
		height: 88px;
	}
</style>